<!-- 全国地图组件 -->
<template>
  <div class="map">
    <!-- 景区实时客流量 -->
    <div class="title">景区实时客流量</div>
    <!-- 展示的地图组件 -->
    <div ref="china_map" class="china_map"></div>
  </div>
</template>

<script setup>
//引入echarts
import * as echarts from "echarts";
//引入echarts的配置项
import { mapOption } from "@/config/echarts/config";
//引入中国地图的JSON数据
import chinaJSON from "./china.json";
//初始化柱状图
let china_map = ref();
//注册中国地图
echarts.registerMap("china", chinaJSON);
onMounted(() => {
  let myCharts = echarts.init(china_map.value);
  //配置数据主要是是pieOption.series[0].data
  myCharts.setOption(mapOption);
});
</script>

<style lang="scss" scoped>
.map {
  flex: 4;
  position: relative;
  .title {
    position: absolute;
    left: 20px;
    top: 100px;
    background: url(../../images/map-title-bg.png) no-repeat;
    color: white;
    padding: 4px 20px 4px 45px;
    font-size: 16px;
  }

  .china_map {
    height: 100%;
    width: 100%;
  }
}
</style>
